let tool = {
		name: "VK-Video",
		label: "VK-Video",
		toolbar: 'insert,99',
		icon: '/Scripts/CKEDITOR_plugs/plugins/vk_video/icon.png',
		form: `
<style>
.ckeditor__vk_video-modal.show { display: flex; animation: show .7s }
.ckeditor__vk_video-modal.hide { display: none }
@keyframes show {0%   { opacity: 0 } 100% { opacity: 1 }}
.ckeditor__vk_video-modal {position: fixed;top: 0;left: 0;align-items: center;justify-content: center;width:100%;height:100%;z-index: 999;background: RGBA(255,255,255, .7);}
.ckeditor__vk_video-modal__window {position: relative;text-align: center;width: 30%;min-width: 400px;min-height: 300px;height: auto;padding: 1%;padding-bottom: 0;background: white;box-shadow: 0px 0px 5px 5px rgb(245 113 113);border: 1px solid white;overflow: hidden;resize: auto;}
.ckeditor__vk_video-modal__window__title { border-bottom: 1px solid red; font-size: larger; }
/* Tabs */
.tab-wrapper{ width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; font-family: sans-serif; overflow-y: auto; }
.ckeditor__vk_video-modal__window__vk_video_code{ background-color: #fff; width: calc(100% - 40px); max-width: 100%; padding: 20px; order: 1; }
.ckeditor__vk_video-modal__window__vk_video_code textarea { width: 100%; min-height: 100px; border: 1px solid #e6e6e6; }
.ckeditor__vk_video-modal__window__vk_video_code textarea:focus { outline: none; box-shadow: 0 0 5px 3px #e6e6e6; }
#options-vk_video .cont{ display: flex; flex-wrap: wrap; place-content: space-between; }
#options-vk_video .hidden { display: none }
#options-vk_video fieldset { display: flex; border: 1px solid #e6e6e6; width: fit-content; height: fit-content; padding: 1em; place-items: center; margin-bottom: .5em; }
#options-vk_video fieldset legend {text-align: left}
#options-vk_video .abs { position: absolute; left: 0; top: 0; }
#options-vk_video .options-vk_video__margin { flex-direction: column }
#options-vk_video input.int { width: 50px; margin: 5px; text-align: center; line-height: 25px; font-size: 12pt; }
#options-vk_video * { user-select: none }
#options-vk_video .options-vk_video__code {width: calc(100% - 1em)}
.ckeditor__vk_video-modal.transperency, .ckeditor__vk_video .transperency { opacity: .5 }
.ckeditor__vk_video-modal__window__status-bar { border-top: 1px solid #e6e6e6; padding: .5em; color: #908f8e; }
.ckeditor__vk_video-modal__layer__alert { display: none; padding: 2%; }
.ckeditor__vk_video-modal__layer__alert.show { display: flex; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #d35050; z-index: 1; color: white; flex-direction: column; font-size: large; }

.toggle-button_label { cursor: pointer;font-size: 2rem;margin-left: 10px;font-family: 'Righteous', cursive;color: #fff;font-weight: 600; }
.toggle-button { position: relative;width: 100px;height: 50px;margin: 0;vertical-align: top;background: #ffffff;border: 1px solid #bbc1e1;border-radius: 30px;outline: none;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2); }
.toggle-button::after { content: "";position: absolute;left: 3px;top: 1.5px;width: 45px;height: 45px;background-color: blue;border-radius: 50%;transform: translateX(0);transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2); }
.toggle-button:checked::after { transform: translateX(calc(100% + 3px));background-color: #fff; }
.toggle-button:checked { background-color: blue; }
</style>
<div class='ckeditor__vk_video-modal hide'>
<div class='ckeditor__vk_video-modal__window'>
<h1 class='ckeditor__vk_video-modal__window__title'>Добавление видео из VK</h1>
<div class='ckeditor__vk_video-modal__layer__alert'></div>
<div class="ckeditor__vk_video-modal__window__vk_video_code" id="options-vk_video">
<fieldset class='options-vk_video__code'>
<legend>Вставьте код плеера</legend>
<textarea class='vk_video__code'></textarea>
</fieldset>
<fieldset class='options-vk_video__width'>
<legend>Ширина плеера</legend>
<input id='options-vk_video__width' class='int' type='number' name="vk_video-width" value='100' min='0' max='100' >
<span>% от контейнера</span>
</fieldset>
</div>
<div class='ckeditor__vk_video-modal__window__status-bar'></div>
</div>
</div>
`, //позже стоит сделать свою систему модальных окон и внедрить свой апи для тулов. Переписать все через классы.
		env: {
			modal: {
				layer: '.ckeditor__vk_video-modal',
				window: '.ckeditor__vk_video-modal__window',
				controls: {
					cont: '#options-vk_video',
					frameCode: '.vk_video__code',
					width: '#options-vk_video__width',
					statusBar: {
						cont: '.ckeditor__vk_video-modal__window__status-bar',
					},
					alertLayer: {
						cont: '.ckeditor__vk_video-modal__layer__alert'
					}
				}
			},
			wrapper: '<div class="wrapper-cont" style="width:${width};margin:auto"><div class="youtube-embed-wrapper" style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden">${IFRAME}</div></div>',
			frameStyle: "position:absolute;top:0;left:0;width:100%;height:100%",
			playerCode: {code: ''}, //шаблон кода слайдера для итоговой вставки
			options: {
				width: 100,
				frameCode: ''
			},
			errors: {
				playerCodeNotValidate: {
					h: 'Ошибка',
					p: 'Вставленный текст не похож на код видеоплеера.',
					t: 3
				}
			},
			error: false,
		},
		command: function(env, editor) {
			env['modal'].visible ? env['modal'].hide() : env['modal'].show();
			//тут действия при клике на иконке инструмента
		},
		//this - текущий объект с настройками тула, env - постоянное хранилище переменных тула, editor - ссылка на экземпляр CKEDITOR,
		init: function(env, editor) {
			// 			console.log(arguments);
			// 			console.log(this);
			let eCont = editor.container;
			let getObj = mark => typeof mark == 'string' ? eCont.find(mark).$[0] : (mark.id ? eCont.find('#'+mark.id).$[0] : eCont.find([...mark.classList].map(c => '.' + c).join('')).$[0]);
			eCont.appendHtml(this.form);
			//предполагаем что классы модального окна уникалены для разных инструментов
			//готовим ссылки на контролы
			env['modal']['layer'] = getObj(env['modal']['layer']);
			env['modal']['window'] = getObj(env['modal']['window']);
			env['modal']['controls']['cont'] = getObj(env['modal']['controls']['cont']);
			env['modal']['controls']['frameCode'] = getObj(env['modal']['controls']['frameCode']);
			env['modal']['controls']['width'] = getObj(env['modal']['controls']['width']);
			env['modal']['controls']['statusBar']['cont'] = getObj(env['modal']['controls']['statusBar']['cont']);
			env['modal']['controls']['alertLayer']['cont'] = getObj(env['modal']['controls']['alertLayer']['cont']);
			env['modal']['layer'].addEventListener('click', (e)=> e.target == env['modal']['layer'] ? env['modal'].hide() : null );
			env['modal'].show = function(){
				env['options'].update();
				env['modal']['layer'].classList.replace('hide', 'show');
				env['modal'].visible = true;
				env['modal'].update();
			};
			env['modal'].hide = function(){
				env['modal']['layer'].classList.replace('show', 'hide');
				env['modal']['controls']['statusBar'].clear();
				env['modal'].visible = false;
				env['modal']['controls']['alertLayer'].sh();
				env['modal'].optClear();
				env['playerCode'].insert();
			}
			env['modal'].optClear = ()=>{
				env['options'] = JSON.parse(JSON.stringify(env['options_original']));
				env['options'].update = env['options_original'].update;
			}
			env['modal'].update = ()=> {
				env['modal']['controls']['width'].value = env['options']['width'];
			}
			env['options'].update = function(){
				env['options']['width'] = env['modal']['controls']['width'].value;
				env['options']['playerCode'] = env['modal']['controls']['frameCode'].value;
			}
			env['playerCode'].update = ()=> {
				//main func for generate template
				if(!env['options']['playerCode'].length) return
				let frame = env['options']['playerCode'].replace("<iframe ", `<iframe style="${env['frameStyle']}"`);
				let playerCode = env['wrapper'].replace(/\${(.*?)}/g, opt => {
					if(opt == '${width}') return `${env['options']['width']}%`
					if(opt == '${IFRAME}') return frame
				});
				env['playerCode']['code'] = playerCode;
			}
			env['modal'].update = ()=> {
				env['options'].update();
				env['playerCode'].update();
			}
			env['modal']['controls']['cont'].querySelectorAll('input').forEach( input => {
				input.addEventListener('change', e => {
					env['modal'].update();
				});
			});
			env['modal']['controls']['frameCode'].validate = text => text.search(/(<iframe.* src=")([^"]+)(".*<\/iframe>)/gm) >= 0
			env['modal']['controls']['frameCode'].clear = () => env['modal']['controls']['frameCode'].value = ''
			env['modal']['controls']['frameCode'].addEventListener('paste', e => {
				if(e.target.validate(e.clipboardData.getData('text'))) {
					env['modal']['controls']['frameCode'].value = e.clipboardData.getData('text');
					env['modal'].update();
					e.preventDefault();
				} else {
					e.target.clear();
					console.warn(env['errors']['playerCodeNotValidate'].p);
					env['modal']['controls']['alertLayer'].sh(env['errors']['playerCodeNotValidate']);
					e.preventDefault();
				}
			})
			env['playerCode'].insert = ()=>{
				let pCode = CKEDITOR.dom.element.createFromHtml(env['playerCode']['code']);
				editor.insertElement(pCode);
			}//вставка шаблона в редактор
			env['options_original'] = JSON.parse(JSON.stringify(env['options']));
			env['options_original'].update = env['options'].update;
			env['modal']['controls']['statusBar'].clear = ()=> env['modal']['controls']['statusBar']['cont'].innerText = '';
			env['modal']['controls']['statusBar'].update = msg=> env['modal']['controls']['statusBar']['cont'].innerText = msg;
			env['modal']['controls']['statusBar'].updateHtml = msg=> env['modal']['controls']['statusBar']['cont'].innerHTML = msg;
			env['modal']['controls']['alertLayer'].sh = (msg)=> {//show\hide
				let aCont = env['modal']['controls']['alertLayer']['cont'];
				aCont.innerHTML = msg ? `<h2>${msg.h}</h2><p>${msg.p}</p>` : '';
				if(!msg) { aCont.classList.remove('show'); env['error'] = false; return; }
				env['error'] = true;
				aCont.classList.add('show');
				if(msg.t && msg.t > 0) { setTimeout(()=>env['modal']['controls']['alertLayer'].sh(), msg.t * 1000) }
			}
		}
}
export {tool}